<!DOCTYPE html>
<!-- saved from url=(0034)http://sinooceanlas.com/list/cid/5 -->
<html lang="en" style="font-size: 40px;">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">



    <title>会员风采</title>
    <meta name="keywords" content="河北省企业投资理财协会">
    <meta name="description"
        content="河北省企业投资理财协会">

    <meta content="width=device-wi  dth, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

    <meta name="format-detection" content="telephone=no">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <meta name="referrer" content="never">

    <link rel="stylesheet" href="./comment/layui.css">

    <link rel="stylesheet" type="text/css" media="screen and (min-width:320px) and (max-width:760px)"
        href="./comment/phone.css">

    <link rel="stylesheet" type="text/css" media="screen and (min-width:760px) and (max-width:3600px)"
        href="./comment/pc.css">

    <link rel="stylesheet" type="text/css" href="./comment/reset.css">

    <link rel="stylesheet" type="text/css" href="./comment/animate.css">

    <link rel="stylesheet" type="text/css" href="./comment/swiper.min.css">

    <script type="text/javascript" src="./comment/rem.js"></script>

    <link id="layuicss-layer" rel="stylesheet" href="./comment/layer.css" media="all">
</head>

<body style="font-size: 12px;">



    <!-- 公共导航 go -->
    <div id="app">
        <my-header></my-header>
         <div class="gg_ban">
            <img src="./comment/bg1.jpg">
            <div class="wow zoomIn" style="visibility: visible; animation-name: zoomIn;">
            </div>
        </div>
        
        <div class="pro_two">
            <div class="wow bounceInDown com_one_t" style="visibility: visible; animation-name: bounceInDown;">
                <p>会员风采</p>
                <span></span>
            </div>
            <div class="ne_one">
		
			<div class="ne_one_c wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;">
				<ul>
					<li v-for="item in dataSource" :key="item.id">
						<a @click="toDetile(item)">
							<div class="ne_one_c_a">
								<img :src="gloabImageUrl+ item.image" alt="">
							</div>
							<span>{{item.create_time}}</span>
							<h6>{{item.title}}</h6>
							<!-- <p v-html="item.content"> </p> -->
						</a>
					</li>
				</ul>
			</div>
			<div v-if="dataSource.length" class="gg_page">
				<ul>
					<ul class="pagination">
						<li @click="currentPage <= 1?'':changePage(currentPage - 1)"
						:disabled="currentPage <= 1"
						class="disabled"><span>«</span>
						</li>
						<li 
						v-for="page in pages"
						:key="page"
						@click="changePage(page)"
						:class="{ active: currentPage === page }"><span>{{page}}</span></li>
						<li @click="currentPage >= totalPages?'':changePage(currentPage + 1)"
						:disabled="currentPage >= totalPages"><span>»</span></li>
					</ul>
				</ul>
			</div>
		</div>
        </div>
        <my-footer></my-footer>
    </div>
    <script type="text/javascript" src="./comment/jquery-2.1.4.min.js"></script>
    <script src="./js/vue.js"></script>
	<script src="js/comment.js"></script>
    <script type="text/javascript" src="./comment/layer.js"></script>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
                dataSource:[],
                // 分页
                totalPage: 0,
                pageSize: 10,
                currentPage: 1,
                maxVisibleButtons: 10,
                provinceList:[],
				cityList:[],
				countyList:[],
				provinceId:'',
				cityId:'',
			},
            computed: {
                totalPages() {
                    return Math.ceil(this.totalPage / this.pageSize)
                },
                pages() {
                    const range = []
                    const half = Math.floor(this.maxVisibleButtons / 2)
                    let start = Math.max(1, this.currentPage - half)
                    let end = Math.min(this.totalPages, start + this.maxVisibleButtons - 1)

                    if (end - start + 1 < this.maxVisibleButtons) {
                        start = Math.max(1, end - this.maxVisibleButtons + 1)
                    }

                    for (let i = start; i <= end; i++) {
                        range.push(i)
                    }
                    return range
                }
            },
			mounted () {
				document.getElementById('introductionPage').classList.add('gg_nav_r_r_ac')
                this.getData()
                this.getProvince()
			},
			methods: {
				toDetile(item){
					localStorage.setItem(item.id,item.content)
					localStorage.setItem('member_title',item.title)
					localStorage.setItem('member_time',item.create_time)
					localStorage.setItem('imageUrl',item.image)
					
					window.location.href = './memberDetile.html?id='+item.id
				},
                changePage(page) {
                    this.currentPage = page
                    if (page >= 1 && page <= this.totalPages) {
                        this.getData()
                    }
                },
                getData () {
					let pageData = {
                        page:this.currentPage,
                        limit:this.pageSize
                    }
					const that = this
					var indexlayer = layer.load(2);
					$.ajax({
						type: 'get',
						url: gloabApi + "/Member/getList",
						data: pageData,
						dataType: 'json',
						success: function (res) {
							if (res.code == 1) {
								console.log((res))
								that.dataSource = res.data.list
								that.totalPage = res.data.total
							} else {
								layer.msg(res.msg);
							}
							layer.close(indexlayer);
						},
					})
				},
                provinceChange(e){
					this.provinceId = e.target.value
					this.getCityList(this.provinceId)
				},
				cityChange(e){
					this.cityId = e.target.value
					this.getCountyList(this.cityId)
				},
				getProvince () {
					const that = this
					// var indexlayer = layer.load(2);
					$.ajax({
						type: 'get',
						url: gloabApi + "/Common/getProvinceList",
						data: {},
						dataType: 'json',
						success: function (res) {
							if (res.code == 1) {
								console.log((res))
								that.provinceList = res.data
								that.provinceId = res.data[0].province_id
								that.getCityList(that.provinceId)
							} else {
								// layer.msg(res.msg);
							}
							// layer.close(indexlayer);
						},
					})
				},
				getCityList (provinceId) {
					const that = this
					// var indexlayer = layer.load(2);
					$.ajax({
						type: 'get',
						url: gloabApi + "/Common/getCityList",
						data: {province_id:provinceId},
						dataType: 'json',
						success: function (res) {
							if (res.code == 1) {
								console.log((res))
								that.cityList = res.data
								that.cityId = that.cityList[0].city_id
								that.getCountyList(that.cityId)
							} else {
								// layer.msg(res.msg);
							}
							// layer.close(indexlayer);
						},
					})
				},
				getCountyList(cityId) {
					const that = this
					// var indexlayer = layer.load(2);
					$.ajax({
						type: 'get',
						url: gloabApi + "/Common/getCountyList",
						data: {city_id:cityId},
						dataType: 'json',
						success: function (res) {
							if (res.code == 1) {
								console.log((res))
								that.countyList = res.data
								that.countyId = res.data[0].county_id
							} else {
								// layer.msg(res.msg);
							}
							// layer.close(indexlayer);
						},
					})
				},
			}
		})
	</script>
    <script src="./js/login.js"></script>
	<script type="text/javascript" src="./comment/index.js"></script>
	<script type="text/javascript" src="./comment/wow.min.js"></script>
    <script type="text/javascript" src="./comment/layui.js"></script>
</body>

</html>